<!DOCTYPE html>
<html>
<head>
    <title>{$.teaTitle}</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="shortcut icon" href="/images/favicon.png"/>
    <link rel="stylesheet" type="text/css" href="/_/@default/layout.css" media="all"/>
    <script type="text/javascript" src="/js/teaweb.js"></script>

    {$TEA.SEMANTIC}
    {$TEA.VUE}
    {$echo "header"}

    <script type="text/javascript" src="/js/chart.vue.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/chart.css" media="all"/>
</head>
<body>

<div>
    <!-- 顶部导航 -->
    <div class="ui menu inverted top-nav blue small borderless" v-cloak="">
        <a href="/" class="item"><i class="icon leaf"></i>{{teaName}} &nbsp; <sup>v{{teaVersion}} - 可视化智能Web服务</sup></a>
        <div class="right menu">
            <a href="/settings/profile" class="item"  :class="{active: teaMenu == 'settings.profile'}">
                <i class="icon user" v-if="teaUserAvatar.length == 0"></i>
                <img class="avatar" :src="teaUserAvatar" v-if="teaUserAvatar.length > 0"/>
                {{teaUsername}}
            </a>
            <a v-if="teaIsSuper" :href="Tea.url('settings')" class="item" :class="{active: teaMenu == 'settings'}"><i class="icon setting"></i>设置</a>
            <a v-if="!teaIsSuper" :href="Tea.url('settings.login')" class="item" :class="{active: teaMenu == 'settings'}"><i class="icon setting"></i>设置</a>
            <a :href="Tea.url('logout')" class="item" title="安全退出登录"><i class="icon sign out"></i>退出</a>
        </div>
    </div>

    <!-- 左侧主菜单 -->
    <div class="main-menu" v-cloak="">
        <div class="ui labeled menu vertical blue inverted tiny borderless">
            <a class="item"></a>
            <a v-bind:href="Tea.url('dashboard')" class="item" v-bind:class="{active:teaMenu == 'dashboard'}">
                <i class="ui dashboard icon"></i>
                仪表板
            </a>

            <!-- 模块 -->
            <a v-for="module in teaModules" class="item" v-bind:href="Tea.url(module.code)" v-bind:class="{active:teaMenu == module.code}">
                <i class="window restore outline icon" v-if="module.icon == null"></i>
                <i class="ui icon" v-if="module.icon != null" :class="module.icon"></i>
                {{module.menuName}}
            </a>
        </div>
    </div>

    <!-- 左侧子菜单 -->
    <div class="sub-menu">
        <div class="ui secondary menu vertical borderless blue pointing" v-if="teaSubMenus.length > 0" v-cloak="">
            <span class="item header" v-if="teaSubHeader.length > 0">{{teaSubHeader}}</span>
            <a :href="subMenu.url" class="item" :class="{active:subMenu.active}" v-for="subMenu in teaSubMenus">{{subMenu.name}}</a>
        </div>
    </div>

    <!-- 右侧主操作栏 -->
    <div class="main" v-bind:class="{'without-menu': teaSubMenus.length == 0}" v-cloak="">
        <!-- 操作菜单 -->
        <div class="ui top menu tabular tab-menu" v-if="teaTabbar.length > 0">
            <a class="item" v-for="item in teaTabbar" v-bind:class="{active:item.active}" v-bind:href="item.url">
                <var>{{item.name}} &nbsp;<i class="icon small" :class="item.icon" v-if="item.icon != null"></i> </var>
                <span v-if="item.subName.length > 0">({{item.subName}})</span>
            </a>
        </div>

        <!-- 功能区 -->
        {$TEA.VIEW}

        <!-- 快速到顶部 -->
        <a href="" class="go-top-btn hidden" title="点击回到顶部" v-on:click.prevent="goTop()" ><i class="icon up arrow circle"></i></a>
    </div>

    <!-- 底部 -->
    <div id="footer" class="ui menu inverted light-blue borderless small">
        <a  href="/settings/update" class="item" title="点击进入检查版本更新页面">{{teaName}} v{{teaVersion}}</a>
        <!--<a href="http://meloy.cn" target="_blank" class="item">官网</a>-->
        <a href="https://github.com/TeaWeb/build" target="_blank" class="item">GitHub</a>
        <a href="http://plus.meloy.cn/doc" target="_blank" class="item">文档</a>
        <a href="https://github.com/TeaWeb/build/issues" target="_blank" class="item">提Bug</a>
        <a class="item"><span>QQ讨论群：199435611</span>
                <form class="ui form">
                    <input type="text" value="199435611" onfocus="this.select()"/>
                </form>
        </a>
        <a href="http://plus.meloy.cn" target="_blank" class="item right" title="TeaWeb Plus">TeaWeb+ - API网关和团队管理</a>
    </div>
</div>

{$echo "footer"}

</body>
</html>